<template>
  <div>
    <MyElDialog
      v-model:isDialogShow="isDlgShow"
      dialogTitle="Warning 警告!"
      :dialogCenter="true"
      @dialogClosed="dialogClosed"
    >
      <div class="dialog-content">是否确认删除信息？</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogCancel">取消</el-button>
          <el-button type="primary" @click="dialogConfirm">确认</el-button>
        </span>
      </template>
    </MyElDialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch, toRefs } from 'vue'

const emits = defineEmits(['update:isDialogShow', 'dialogCancel', 'dialogConfirm', 'dialogClosed'])
const props = defineProps({
  isDialogShow: {
    type: Boolean,
    default: true
  }
})

const { isDialogShow: isDlgShow } = toRefs(props)

// 监控父组件显隐控制--双向绑定值
watch(
  () => props.isDialogShow,
  val => {
    emits('update:isDialogShow', val)
  },
  { deep: true }
)

/**
 * @description Dialog 取消
 */
const dialogCancel = () => {
  emits('dialogCancel')
}

/**
 * @description Dialog 确认
 */
const dialogConfirm = row => {
  emits('dialogConfirm', row)
}

/**
 * @description Dialog 关闭动画结束时的回调
 */
const dialogClosed = () => {
  emits('dialogClosed')
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
  isDlgShow
})
</script>

<style lang="scss" scoped>
.dialog-content {
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #000000;
  font-weight: 700;
}
</style>
